@font-face {
  font-family: 'Normal';
  src: url(fonts/test/normal.otf);
  font-weight: normal;
}

@font-face {
  font-family: 'Square';
  src: url(fonts/test/square.otf);
  font-weight: normal;
}

.glyph {
  font-family: 'Normal';
}

body {
  background: #ddd;
  color: #111;
  cursor: default;
}

* {
  padding: 0;
  margin: 0;
  /* font-family: 'Normal'; */
}

button:before {
  content: '[';
}

button:after {
  content: ']';
}

button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  /* outline: inherit; */
}

button:hover {
  background: #ccc;
}

select {
  appearance: none;
  border: none;
}

option:checked {
  background-color: #bbb;
}

option:hover {
  background-color: #999;
  border: solid 1px #000;
}

.screen * {
  font-family: 'Square';
}

h2 {
  font-size: inherit;
  font-weight: bold;
}

h3 {
  font-size: inherit;
  font-weight: bold;
}


.story-message {
  color: #149;
  font-weight: bold;
}

.npc-message {
  color: #160;
  font-weight: bold;
}

.command-invalid-minor {
  color: #844;
}

.command-failed-minor {
  color: #844;
}


.stat pre {
  line-height: 16px; /* TODO */
  font-family: 'Square';
  /* font-weight: bold; */
}



.leftside {
  grid-area: leftside;
  padding-right: 8px;
  border-right: solid 4px #0004;
}

.rightside {
  grid-area: rightside;
  padding-left: 8px;
  border-left: solid 4px #0004;
}

.stat {
  padding-bottom: 8px;
  border-bottom: solid 4px #0004;
}
